<template>
  <div>

    <HeadSelections></HeadSelections>

    <div id="brandPart">
      <div id="brandTitle">
        <span id="brandTitle-title">品牌</span>
        <hr style="background-color: #6666664D;">
      </div>

      <div id="brandList" style="max-height: 500px; overflow: scroll" >
        <div  v-for="item in carBrands" :key="item.id" >
          <el-radio-group  v-model="curBrand" @change="changeBan">
            <el-radio-button :label="item.brandName" style="margin:10px;" ></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <el-card id="selectionsPart" shadow="hover">
      <div id="levelSelection">
        <span class="selectionTitle" style="font-size: 22px;">级别</span>
        <el-radio-group class="selectionButton" v-model="lvl" @change="changeLvl">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="轿车"></el-radio-button>
          <el-radio-button label="SUV"></el-radio-button>
          <el-radio-button label="MPV"></el-radio-button>
          <el-radio-button label="跑车"></el-radio-button>
          <el-radio-button label="微面"></el-radio-button>
          <el-radio-button label="微卡"></el-radio-button>
          <el-radio-button label="轻客"></el-radio-button>
        </el-radio-group>
      </div>
      <div id="energySelection">
        <span class="selectionTitle" style="font-size: 22px;">能源</span>
        <el-radio-group class="selectionButton" v-model="energy" @change="changeEnergy">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="汽油"></el-radio-button>
          <el-radio-button label="柴油"></el-radio-button>
          <el-radio-button label="油电混合"></el-radio-button>
          <el-radio-button label="电动"></el-radio-button>
        </el-radio-group>
      </div>
      <div id="priceSelection">
        <span class="selectionTitle" style="font-size: 22px;">价格</span>
        <el-checkbox class="selectionButton" v-model="isPriceSelected" label="不限" @change="changePrice" border></el-checkbox>
        <span id="priceInput" v-show="!isPriceSelected">
          <el-input style="width: 120px" v-model="minPrice" type="number" placeholder="最低期望价"></el-input>
          ---
          <el-input style="width: 120px" v-model="maxPrice" type="number" placeholder="最高期望价"></el-input>
          <span style="margin-left: 10px; font-size: 16px">万</span>
        </span>
      </div>
      <el-button id="searchBtn" type="primary" @click="doSearch">确定</el-button>
    </el-card>

    <div id="searchResult">
      <span id="searchResult-item" v-for="item in resultSet" :key="item.id">
        <a>
          <img  :src="item.carCover" style="width:200px;height:200px" @click="detail(item.carId)">
          <div id="searchResult-price">
            <span>落地价：{{item.carPriceL}}万元</span>
          </div>
          <div id="searchResult-name">
            <span>{{item.carName}}</span>
          </div>
        </a>
      </span>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";

export default {
  name: "index",
  components: {
    Footer
  },
  data() {
    return {
      carBrands: [
      ],
      resultSet: [
      ],
      curBrand:'宝马',
      lvl: "不限",
      energy: "不限",
      minPrice: '',
      maxPrice: '',
      isPriceSelected: true
    }
  },
  methods: {
    changeLvl(lId) {
      this.lvl = lId;
    },
    changeEnergy(eId) {
      this.energy = eId;
    },
    changeBan(ban){
      this.curBrand = ban
    },
    changePrice() {
      if (this.isPriceSelected) {
        this.minPrice = this.maxPrice = ''
      }
    },
    doSearch() {
      this.$axios.get("/client/carSelect",{
					params: {
						curBrand: this.curBrand,
						lvl: this.lvl,
						energy: this.energy,
						minPrice: this.minPrice,
						maxPrice: this.maxPrice,
					}
				}).then(res => {
          this.resultSet = res.data.data
        })

    },
    detail(id){
      // const ARTICLE_URL = "http://localhost:8080/car/detail/" + id;
      //       //return ARTICLE_URL;
      //       window.open(ARTICLE_URL, "_blank")
      // console.log(id)
      this.$router.push({
        name: 'CarDetail',
        params: {
          id: id
        }
      })
    }
  },
  created () {
      this.$axios.get("/brand/all").then(res =>{
        this.carBrands = res.data.data
      })
    }
}
</script>

<style scoped>
#brandPart {
  width: 199px;
  margin-bottom: 25px;
  margin-left: 160px;
  border: 1px solid #6666664D;
}

#brandTitle {
  background-color: dodgerblue;
  width: 200px;
  text-align: center;
}

#brandTitle-title {
  color: white;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}

#brandItem {
  height: 50px;
}

#logo {
  position: absolute;
  left: 20px;
  top: 10px;
}

#name {
  font-size: 16px;
  font-weight: 700;
  width: 50px;
  position: absolute;
  left: 90px;
  top: 15px;
}

#selectionsPart {
  width: 957px;
  height: 340px;
  position: absolute;
  left: 400px;
  top: 240px;
}

.selectionTitle {
  margin-left: 10px;
  line-height: 80px;
}

.selectionButton {
  margin-left: 20px;
  margin-bottom: 6px;
}

#priceInput {
  padding-left: 15px;
  padding-bottom: 5px;
}

#searchBtn {
  position: absolute;
  width: 120px;
  left: 800px;
  bottom: 20px;
}

#searchResult {
  width: 958px;
  position: relative;
  left: 400px;
  bottom: 210px;
  border: 1px solid #6666664D;
}

#searchResult-item {
  display: inline-block;
  width: 239.5px;
  height: 239px;
}

#searchResult-logo {
  margin-top: 30px;
  margin-left: 50px;
}

#searchResult-price {
  text-align: center;
  color: #ff6600;
  font-size: 16px;
  margin-top: 20px;
}

#searchResult-name {
  text-align: center;
  font-size: 20px;
  margin-top: 15px;
}

#brandList::-webkit-scrollbar{
  display: none;
}

</style>
